<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <!-- <div class="operation" @click="handleAdd">新增权限</div> -->
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="权限名称" class="row-padding-bottom">
              <el-input
                placeholder="请输入权限名称"
                clearable
                v-model="filterField.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              class="commonBtn"
              @click="searchList"
            ></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <exportBtn
              v-if="!isShowAdd"
              :dataLen="tableList.length"
              :filterField="filterField"
              api="api-s/report/export_SYS_ACTION"
            ></exportBtn>
          </el-form-item>
          <!-- <el-form-item>
            <exportBtn :dataLen="tableList.length" :filterField="filterField" api="api-s/report/export_SYS_ACTION"></exportBtn>
          </el-form-item>
          <el-form-item class="fr">
            <el-button class="commonBut saveBtn funComBut"  icon="icon iconfont icontianjia"  @click="handleAdd" v-show="isShowAdd">
               <span class="opetareText">新增权限</span>
            </el-button>
          </el-form-item> -->
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px" v-if="isShowAdd">
          <exportBtn
            :dataLen="tableList.length"
            :filterField="filterField"
            api="api-s/report/export_SYS_ACTION"
          ></exportBtn>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icontianjia"
            @click="handleAdd"
          >
            <span class="opetareText">新增权限</span>
          </el-button>
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="name"
            label="权限名称"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="code"
            label="权限编码"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="sortCode"
            label="排序"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <!-- <el-table-column
          prop="describe"
          label="介绍"
          align="center"
          :formatter="formatTd"
        ></el-table-column> -->
          <el-table-column label="介绍" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.describe"
                :columnName="'describe'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="editPermission(scope.row)"
                v-show="isShowUpdate"
                >编辑</el-link
              >
              <el-link
                type="primary"
                @click="toDel(scope.row.id)"
                v-show="isShowDel"
                >删除</el-link
              >
              <span v-show="!isShowDel && !isShowUpdate">--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <el-dialog
        :title="addOrEdit == 0 ? '增加权限' : '修改权限'"
        :close-on-click-modal="false"
        :visible.sync="editPermissionDialogVisible"
        @close="closeDialog"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <el-form
          :model="formData"
          :rules="formRules"
          ref="form"
          label-width="120px"
        >
          <el-form-item prop="name" label="权限名称">
            <el-input
              v-model.trim="formData.name"
              placeholder="请输入权限名称"
              class="input"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="code" label="权限编码">
            <el-input
              v-model.trim="formData.code"
              placeholder="请输入权限编码"
              class="input"
              clearable
              :disabled="addOrEdit == '1'"
            ></el-input>
          </el-form-item>
          <el-form-item prop="sortCode" label="排序">
            <!-- <el-input
              v-model.trim="formData.sortCode"
              placeholder="请输入序号"
              class="input"
              clearable
              style="width:26%;margin-right:10px"
            ></el-input> -->
            <el-input-number
              v-model="formData.sortCode"
              :min="0"
              :max="999999999"
              placeholder="请输入序号"
            ></el-input-number>
            <span>（值越大越靠前）</span>
          </el-form-item>
          <el-form-item prop="describe" label="介绍">
            <el-input
              type="textarea"
              v-model.trim="formData.describe"
              autocomplete="off"
              placeholder="请输入介绍"
              maxlength="200"
              show-word-limit
              rows="5"
              class="input"
              clearable
              style="height: 100%"
            ></el-input>
          </el-form-item>
          <div style="text-align: right"></div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="cancelSave" class="cancel">取消</el-button>
          <el-button
            type="primary"
            @click.native="savePermission"
            class="save"
            :loading="canLogin"
            >保存</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'permissionAction',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '权限动作',
      titleExplain: '此处权限动作为所有功能页面的通用权限',
      loading: true,
      isShow: false,
      tableList: [],
      requestUrl: '/api-u/action/list',
      filterField: {
        name: '',
      },
      editPermissionDialogVisible: false,
      formData: {
        id: '',
        name: '',
        code: '',
        sortCode: '',
        describe: '',
      },
      formRules: {
        name: {
          required: true,
          min: 1,
          max: 20,
          message: '最长允许输入20个字',
          trigger: 'blur',
        },
        code: {
          required: true,
          // pattern:/[_a-zA-Z0-9]{1,2}/,
          pattern: /^[_a-zA-Z0-9]{1,20}$/,
          message: '请输入1-20位数字，字母，下划线组成的字符',
          trigger: 'blur',
        },
        sortCode: {
          required: true,
          pattern: /(^[1-9]\d*$)/,
          message: '请输入大于等于0的整数',
          trigger: 'blur',
        },
        // introduction: {
        //   required: true,
        //   message: "请输入介绍",
        //   trigger: "blur"
        // }
      },
      addOrEdit: 0,
      canLogin: false,
      isShowDel: '',
      isShowUpdate: '',
      isShowAdd: '',
    }
  },
  created() {
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('action:add') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('action:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('action:delete') > -1
  },
  mounted() {
    var that = this
    this.$nextTick(function () {
      that.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getTableList(data) {
      //---造数据---begin
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    handleAdd() {
      // this.action = "add";
      this.addOrEdit = 0
      this.editPermissionDialogVisible = true
    },

    // 搜索
    searchList() {
      var that = this
      this.$nextTick(function () {
        that.$refs.pagination.getTableListData()
      })
    },
    cancelSave() {
      // this.action = "show";
      this.editPermissionDialogVisible = false
    },
    editPermission(row) {
      // this.action = "edit";
      this.addOrEdit = 1
      this.editPermissionDialogVisible = true
      //   var { id, name, code, order, introduction } = row;
      // var { id, projectName } = row;
      this.formData.id = row.id
      this.formData.name = row.name
      this.formData.code = row.code
      this.formData.sortCode = row.sortCode
      this.formData.describe = row.describe
    },
    toDel(id) {
      this.$confirm('确认删除?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.del(id)
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    del(id) {
      this.axios({
        method: 'post',
        url: '/api-u/action/delete',
        data: {
          id: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //关闭弹窗
    closeDialog() {
      this.$refs.form.resetFields()
      this.formData = {
        id: '',
        name: '',
        code: '',
        sortCode: '',
        describe: '',
      }
    },
    savePermission() {
      this.canLogin = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.toSave()
          // this.$message({
          //   message: "保存成功",
          //   type: "success"
          // });
          // this.action = "show";
          // this.editPermissionDialogVisible = false;
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    toSave() {
      var url = ''
      if (this.addOrEdit == '0') {
        url = '/api-u/action/add'
      } else {
        url = '/api-u/action/edit'
      }
      this.axios({
        method: 'post',
        url: url,
        data: this.formData,
      })
        .then(
          (response) => {
            this.canLogin = false
            if (!response.data.hasError) {
              var text = ''
              if (this.addOrEdit == '0') {
                text = '添加成功'
              } else {
                text = '编辑成功'
              }
              this.$message({
                message: text,
                type: 'success',
              })
              this.editPermissionDialogVisible = false
              this.$refs.pagination.getTableListData()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.canLogin = false
          }
        )
        .catch((error) => {
          this.canLogin = false
        })
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.operation {
  float: right;
  padding: 8px 12px 8px 12px;
  border-radius: 5px;
  background: rgb(0, 174, 255);
  color: white;
  font: 14px SourceHanSansCN-Medium;
  cursor: pointer;
}
.input {
  width: 90%;
  height: 20px;
  font: 14px SourceHanSansCN-Medium;
}
</style>
